<template>
	<view>
		<view class="content1">

			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left">
						<text>快捷发起</text>
					</view>
					<view class="commonBox-title-right">
						<uni-icons fontFamily="CustomFontPlatform" :size="18" color="#51d0d0"
							@click="showPopUp('menuConfig')">{{'\ue657'}}</uni-icons>
					</view>
				</view>
				<view class="commonBox-content">
					<swiper :indicator-dots="shortcuts.length>8" class="swiper">
						<swiper-item>
							<u-grid col="4">
								<u-grid-item
									:customStyle="{paddingTop:'10px',borderRadius:'5px',background:'linear-gradient(to bottom right, #F6F6F6, #FFFFFF)'}"
									v-for="(menu, menuIndex) in shortcuts.filter((item,index)=>index<8)"
									:index="menuIndex" :key="menuIndex" @click="checkOutMenu(menu)">
									<uni-icons :fontFamily="menu.CustomFont" :size="22"
										:color="menu.AP_Colour">{{ $utils.toUniCode(menu.PIC_PH) }}</uni-icons>
									<text class="grid-text">{{ menu.APFunName }}</text>
								</u-grid-item>
							</u-grid>
						</swiper-item>
						<swiper-item v-if="shortcuts.length>8">
							<u-grid col="4">
								<u-grid-item
									:customStyle="{paddingTop:'10px',borderRadius:'5px',background:'linear-gradient(to bottom right, #F6F6F6, #FFFFFF)'}"
									v-for="(menu, menuIndex) in shortcuts.filter((item,index)=>index>7)"
									:index="menuIndex" :key="menuIndex" @click="checkOutMenu(menu)">
									<uni-icons :fontFamily="menu.CustomFont" :size="22"
										:color="menu.AP_Colour">{{ $utils.toUniCode(menu.PIC_PH) }}</uni-icons>
									<text class="grid-text">{{ menu.APFunName }}</text>
								</u-grid-item>
							</u-grid>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 条件切换 -->
			<view class="condition">
				<view class="condition-left">
					<uni-data-select v-model="ChoiceData" :clear="false" :localdata="radioOptions"></uni-data-select>
				</view>
				<view class="condition-right">
					<uni-datetime-picker v-model="singleTimes" @maskClick="PickerIndex = 1"
						@show="PickerIndex = 99999999999" :style="{'z-index':PickerIndex}" @change="ChangeDate"
						type="daterange" :end="EndDate" rangeSeparator="至" :clear-icon="false"></uni-datetime-picker>
				</view>
			</view>

			<!-- 时间选择器 -->
			<!-- <view class="example-body">
				<uni-datetime-picker v-model="singleTimes" @maskClick="PickerIndex = 1"
					@show="PickerIndex = 99999999999" :style="{'z-index':PickerIndex}" @change="ChangeDate"
					type="daterange" :end="EndDate" rangeSeparator="至"></uni-datetime-picker>
			</view> -->

			<view class="MainBox">
				<view class="x-bc">
					<view class="ItemCard" v-for="item in ModleList" :key="item.id">

						<u-icon size="50rpx" :name="item.Icon"></u-icon>

						<text style="margin-top: 16rpx;font-size: 34rpx;font-weight: 600;">{{item.ShowText}}</text>

						<text style="margin-top: 16rpx;font-size: 20rpx;color: #999;">{{item.Text}}</text>
					</view>
				</view>

				<!-- 消息滚动 -->
				<view @click="openBroadcastPopup">
					<m-carousel-roll :list="RollList" emptyText="暂无播报"
						style="border-radius: 12px;margin-top: 24rpx;padding-left: 18rpx;"
						:title-item-style="{'font-size':'32rpx'}">
						<template v-slot:customLeft>
							<view class="my-custom-text-style x-f"
								style="background-color: #fff3f5;border-radius: 10px;justify-content: center;padding: 4px;">
								<u-icon name="volume-fill" color="#ff8e62" size="34rpx"></u-icon>
							</view>
						</template>
					</m-carousel-roll>
				</view>

				<!-- 完成数量统计 -->
				<view class="CommonCardBox">
					<view class="CommonCard_TopBox">
						<u-cell title="完成数量统计" :border="false"
							:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
							<view slot="icon">
								<view class="CommonCard_TitleLeftIcon FinishIconBac">
									<u-icon size="32rpx" name="/static/image/Icon/FinishNum.png"></u-icon>
								</view>
							</view>

							<!-- <view slot="value" class="u-slot-value x-f CommonCard_RightBox">
								<text class="Text">查看</text>
								<u-icon name="arrow-right" color="#51d0d0" size="20rpx"></u-icon>
							</view> -->
						</u-cell>
					</view>

					<view class="CommonCard_Main">

						<view class="LineBox" v-for="(item,index) in FisishData" :key="index">
							<view class="x-f TextBox">
								<view class="Line_Left" style="flex: 1;">
									<text>{{item.ProductName}}</text>
								</view>

								<view class="Line_Right">
									<text>{{item.WCQty}}</text>
								</view>
							</view>

							<view style="padding-bottom: 30rpx;border-bottom: 2px solid #f7f7f7;">
								<u-line-progress :percentage="(item.WCQty / item.FPlanQty)"
									activeColor="#3ed27e"></u-line-progress>
							</view>
						</view>

						<u-empty v-if="!FisishData.length" mode="data" text="暂无数据" icon="/static/image/Img/history.png"
							width="40vw" height="40vw" textSize="28rpx">
						</u-empty>
					</view>
				</view>


				<!-- 工序执行进度 -->
				<view class="CommonCardBox">
					<view class="CommonCard_TopBox">
						<u-cell title="工序执行进度" :border="false"
							:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
							<view slot="icon">
								<view class="CommonCard_TitleLeftIcon GXIconBac">
									<u-icon size="32rpx" name="/static/image/Icon/GXZXJD.png"></u-icon>
								</view>
							</view>

							<!-- <view slot="value" class="u-slot-value x-f CommonCard_RightBox">
								<text class="Text">查看</text>
								<u-icon name="arrow-right" color="#51d0d0" size="20rpx"></u-icon>
							</view> -->
						</u-cell>
					</view>

					<view class="CommonCard_Main">

						<view class="charts-box">
							<qiun-data-charts type="mix" :opts="opts" :ontouch="true" :chartData="chartData" onzoom
								disableScroll>

							</qiun-data-charts>
						</view>

						<!-- <u-empty mode="data" text="暂无数据" icon="/static/image/Img/history.png" width="40vw" height="40vw"
							textSize="28rpx">
						</u-empty> -->
					</view>
				</view>



				<!-- 员工报工排行 -->
				<view class="CommonCardBox">
					<view class="CommonCard_TopBox">
						<u-cell title="员工报工排行" :border="false"
							:titleStyle="{'font-size':'30rpx','letter-spacing':'2rpx'}">
							<view slot="icon">
								<view class="CommonCard_TitleLeftIcon YGBGPHIconBack">
									<u-icon size="32rpx" name="/static/image/Icon/YGBGPH.png"></u-icon>
								</view>
							</view>

							<!-- <view slot="value" class="u-slot-value x-f CommonCard_RightBox">
								<text class="Text">查看</text>
								<u-icon name="arrow-right" color="#51d0d0" size="20rpx"></u-icon>
							</view> -->
						</u-cell>
					</view>

					<view class="CommonCard_Main">

						<view style="padding: 10rpx 20rpx;">
							<u-cell>
								<view slot="title">
									<text style="color: #999;">排名</text>
								</view>
								<view slot="value">
									<text style="color: #999;">数量</text>
								</view>
							</u-cell>


							<u-cell BottomColor="#f3f3f3" v-for="(item,index) in rankingData" :key="item.FProcessMan">
								<view slot="title" class="x-f">
									<u-icon v-if="index <= 2" size="52rpx"
										:name="FormateBackFun('rank',index)"></u-icon>
									<view v-else
										style="font-size: 36rpx;width: 52rpx;text-align: center;color: #17d56b;">
										{{index + 1}}
									</view>
									<text
										style="color: #333;font-size: 28rpx;margin-left: 24rpx;">{{item.EmplName}}</text>
								</view>
								<view slot="value">
									<text style="color: #ffb803;font-size:  28rpx;">{{item.FSumQty}}</text>
								</view>
							</u-cell>
						</view>

						<u-empty v-if="!rankingData.length" mode="data" text="暂无数据" icon="/static/image/Img/history.png"
							width="40vw" height="40vw" textSize="28rpx">
						</u-empty>
					</view>
				</view>

			</view>

			<!-- 悬浮按钮 -->
			<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true" :initialBottom="80"
				@btnClick="dragBtnClick">
				<template #BtnContent>
					<u-icon name="info-circle" color="#fff" size="54rpx"></u-icon>
				</template>
			</m-drag-button>

		</view>

		<!-- 实时播报 -->
		<u-popup class="Common_Popup" :show="BroadcastPopup" mode="bottom" :round="12" zIndex="9999999"
			@close="closeBroadcastPopup">
			<view class="f-dc" style="height: 80vh;">
				<u-navbar :fixed="false" title="实时播报" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeBroadcastPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="Common_Popup_MainBox">
					<m-step :options="RollList">
						<template v-slot:CardBox="{ element, index }">
							<!-- 在这里定义 CardBox 的内容 -->
							<view style="padding: 30rpx 20rpx;min-height: 100px;">
								<view class="x-f"
									style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
									<text style="font-size: 32rpx;color: #333;">{{element.EmplName}}</text>
									<text
										style="font-size: 32rpx;color: #333;margin-left: 6rpx;">{{element.ProcedureName}}</text>
								</view>

								<view>
									<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
										:borderBottom="false" label="工单号:" :value="element.BGBillNO"
										valueColor="#999"></m-field>

									<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
										:borderBottom="false" label="产品信息:" :value="element.ProductName"
										valueColor="#999"></m-field>

									<view class="x-f">
										<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
											:borderBottom="false" label="良品数量:" :value="element.FDailyQtt"
											valueColor="#2ea77e"></m-field>

										<view style="margin: 0 4rpx;color: #999;font-size: 26rpx;">/</view>

										<m-field valueFontSize="26rpx" labelFontSize="26rpx" paddings="4px 0"
											:borderBottom="false" label="不良品数量:" :value="element.FNgQty"
											valueColor="#d54844"></m-field>

									</view>

								</view>
							</view>
						</template>
					</m-step>

					<u-empty v-if="!RollList.length" mode="data" text="暂无数据" icon="/static/image/Img/history.png"
						width="40vw" height="40vw" textSize="28rpx">
					</u-empty>
				</view>
			</view>
		</u-popup>

		<!-- 看板注释 -->
		<u-popup class="Common_Popup" :show="OpenTipsPopup" mode="bottom" :round="12" zIndex="9999999"
			@close="closeTipsPopup">
			<view class="f-dc" style="max-height: 80vh;">
				<u-navbar :fixed="false" title="提示" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeTipsPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="Common_Popup_MainBox" style="padding: 34rpx 30rpx 125rpx 30rpx;">
					<view class="Common_Card" v-for="(item,index) in TipsTextBox" :key="index">
						<view class="Common_Card_title">
							<text>{{item.Title}}</text>
						</view>
						<view class="Common_Card_Text">
							{{item.Text}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showMenuCfg" mode="bottom" @close="closePopUp('menuConfig')" zIndex="9999999">
			<view class="shortcut">
				<u-navbar :fixed="false" title="快捷发起" :autoBack="false" leftIcon="" :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="left">
						<view style="display: flex;justify-content: center;align-items: center;" @click="saveShortcut">
							<uni-icons color="#fff" type="gear" size="30"></uni-icons>
							<text style="margin-left: 5px;color: #ffffff;">应用设置</text>
						</view>
					</view>
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closePopUp('menuConfig')"></uni-icons>
					</view>
				</u-navbar>
				<view class="shortcut-content">
					<view class="left_wrap">
						<view class="leftItem" :class="treeTypeIdx==index ? 'on' : ''"
							v-for="(treeType,index) in module.treeTypes" @click="changeTreeType(treeType,index)">
							<text>{{treeType.treeTypeName}}</text>
							<u-badge style="margin-left: 2px;"
								:value="treeType.pages.filter(item=>item.IsChecked).length" max="9" :showZero="true"
								bgColor="#c9283a" color="#ffffff"></u-badge>
						</view>
					</view>
					<view class="right_wrap">
						<u-cell v-for="(page,index) in selectedTreeType.pages" @click="toggleShortcut(page)">
							<view style="display: flex;justify-content: flex-start;align-items: center;" slot="title">
								<uni-icons :fontFamily="page.CustomFont" :size="22"
									:color="page.AP_Colour">{{ $utils.toUniCode(page.PIC_PH) }}</uni-icons>
								<text class="rightItem">{{page.APFunName}}</text>
							</view>
							<view slot="right-icon">
								<checkbox :checked="page.IsChecked" :disabled="page.IsShortcut"
									activeBackgroundColor="#51d0d0" activeBorderColor="#51d0d0"></checkbox>
							</view>
						</u-cell>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	// 看板
	export default {
		data() {
			return {
				showMenuCfg: false,
				maxMenus: 16, // 最大可设置快捷菜单数量(3行)
				module: {},
				shortcuts: [], // 已配置全部快捷菜单(默认+自定义)
				treeTypeIdx: 0,
				selectedTreeType: {},
				currModuleID: 2, // 当前模块ID
				currBoardID: 14, // 当前看板ID
				ChoiceData: 0,
				radioOptions: [{
						text: '未审核',
						value: 0,
					},
					{
						text: '已审核',
						value: 1,
					}
				],
				FCJType: null, // 查询公司报工类型
				currentID: null, // 底部栏选中项值
				subsectionList: ['今天', '昨天', '前七天'],
				current: 0,

				PickerIndex: 1, // 时间弹层的层级
				StartDate: null, // 限制开始时间
				EndDate: Date.now(), // 结束时间
				singleTimes: [new Date(), new Date()], // 日期选择控件

				TimeType: '', // 区分时间 start - 开始 ， end - 结束
				ChoiceData: 0,
				radioOptions: [{
						text: '未审核',
						value: 0,
					},
					{
						text: '已审核',
						value: 1,
					}
				],

				ModleList: [{ // 顶部统计模块数据
						Icon: '/static/image/Icon/Total.png',
						ShowText: '2000',
						Text: '报工总数',
						id: 1
					},
					{
						Icon: '/static/image/Icon/FinishNum.png',
						ShowText: '0',
						Text: '合格总数',
						id: 2
					},
					{
						Icon: '/static/image/Icon/percentage.png',
						ShowText: '1',
						Text: '合格率',
						id: 3
					},
					{
						Icon: '/static/image/Icon/WorkNum.png',
						ShowText: '0.00%',
						Text: '报工单数',
						id: 4
					},
				],

				RollList: [], // 轮播消息列表
				BroadcastPopup: false, // 实时播报弹层
				BroadcastOptions: [], // 实时播报数据

				// 完成数量统计
				FisishData: [], // 完成数量统计

				// 工序执行进度统计图
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: true,
					legend: {},
					// xAxis: {
					// 	disableGrid: true,
					// 	title: "单位：年"
					// },
					xAxis: {
						disableGrid: true,
						// calibration: true,
						scrollShow: true,
						itemCount: 5,
						// min: 0,
					},
					yAxis: {
						// disabled: false,
						// disableGrid: false,
						// splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: [{
							calibration: true,
							// position: "left",
							// title: " ",
							min: 0,
						}]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				},

				rankingData: [], // 员工报工排行

				OpenTipsPopup: false, // 看板注释弹层
				TipsTextBox: [{ // 看板注释展示Tips
						Title: '是否审核：',
						Text: '在选定日期范围内，查看是否审核状态下的数据汇总。'
					},
					{
						Title: '时间范围选择：',
						Text: '在选定日期范围内，查询看板数据。'
					},
					{
						Title: '报工总数：',
						Text: '在选定日期范围内，报工的总数。'
					},
					{
						Title: '合格总数：',
						Text: '在选定日期范围内，工单计划生产的产品合格数量汇总。'
					},
					{
						Title: '完成数量：',
						Text: '在选定日期范围内，工单实际产出的产品合格数量占比。'
					}, {
						Title: '报工单数：',
						Text: '在选定日期范围内，报工单生成数量。'
					},
				],
				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
			};
		},
		onLoad(option) {
			var that = this;
			// console.log(JSON.stringify((option)))
			// that.currentID = +option.TabbarID;


			// 查询公司报工类型
			that.FCJType = that.$store.getters.GetFCJType;
			// console.log(that.FCJType);
			// console.log('that: ',that.FCJType);
			// console.log('that: ', uni.getStorageSync('FCJType'));
			setTimeout(() => {
				that.getTopNumsData();
			}, 50)

		},
		created() {
			let that = this;
			// console.log(JSON.stringify((option)))
			// that.currentID = +option.TabbarID;

			// 查询公司报工类型
			that.FCJType = that.$store.getters.GetFCJType;
			// console.log(that.FCJType);
			// console.log('that: ', that.FCJType);
			// console.log('that: ', uni.getStorageSync('FCJType'));
			setTimeout(() => {
				that.initShortcut();
				that.getTopNumsData();
			}, 50)
		},
		watch: {
			ChoiceData(newVal, oldVal) {
				var that = this;
				that.getTopNumsData();
			},
		},
		mounted() {
			var that = this;

			// setTimeout(() => {
			// 	that.BtnShow = true;
			// }, 30)
		},
		methods: {
			initModule(module, menu) {
				let that = this;

				// 发起请求获取模块页面数据
				this.Request.request('getAPPModulePages', {
					UserID: this.$store.state.UserInfo.UserID,
					APPType: module.ModuleID,
				}, (ret) => {
					if (ret.status === 200) {
						const {
							ds: data,
							ds1
						} = ret.data;

						// 使用 Map 预处理 ds1，以 APPFunID 为键
						const ds1Map = new Map();
						ds1.forEach(row => {
							if (!ds1Map.has(row.APPFunID)) {
								ds1Map.set(row.APPFunID, []);
							}
							ds1Map.get(row.APPFunID).push(row);
						});

						// 组织并排序数据
						let organizedData = that.organizeByTreeTypeName(data, ds1Map)
							.sort((a, b) => a.TreeType - b.TreeType);

						// 提取 TabbarData 和 workspaceData
						const TabbarData = [];
						const workspaceData = [];
						organizedData.forEach(item => {
							item.Node.forEach(row => {
								if (row.IsTabbar) {
									TabbarData.push(row);
								} else {
									workspaceData.push(row);
								}
							});
						});
						// 对结果进行排序
						TabbarData.sort((a, b) => a.APFunCode - b.APFunCode);
						workspaceData.sort((a, b) => a.APFunCode - b.APFunCode);

						console.log(organizedData)

						// 持久化模块数据
						that.$store.commit('ChangeAndSetStateData', {
							Name1: 'ModuleInfo_All',
							data: organizedData,
							StorageName: 'ModuleInfo_All',
							StorageData: JSON.stringify(organizedData),
						});

						that.$store.commit('ChangeAndSetStateData', {
							Name1: 'Module_Tabbar',
							data: TabbarData,
							StorageName: 'Module_Tabbar',
							StorageData: JSON.stringify(TabbarData),
						});

						// 更新活动模块到 Vuex 存储
						that.$store.commit('ChangeAndSetStateData', {
							Name1: 'ActiveModule',
							data: module,
							StorageName: 'ActiveModule',
							StorageData: JSON.stringify(module),
						});


						this.$store.commit('ChangeAndSetStateData', {
							Name1: 'Menu',
							data: menu
						});
						// 页面跳转待配置
						uni.navigateTo({
							url: menu.AP_Link
						})

					}
				}, (err) => {
					// 处理错误
				});
			},
			organizeByTreeTypeName(arr, ds1Map) {
				// 创建一个 Map 以按 TreeTypeName 分组数据
				const groupedData = new Map();

				arr.forEach(item => {
					const {
						TreeTypeName,
						TreeType,
						appType,
						APPFunID
					} = item; // 解构赋值，提高可读性

					// 如果没有该分组，则初始化
					if (!groupedData.has(TreeTypeName)) {
						groupedData.set(TreeTypeName, {
							TreeType,
							APPType: appType,
							Node: [], // 初始化 Node 数组
						});
					}

					// 获取 IconApprove，default 为空数组
					const iconApprove = ds1Map.get(APPFunID) || [];

					// 将当前项添加到对应的 Node 中
					groupedData.get(TreeTypeName).Node.push({
						...item,
						IconApprove: iconApprove,
					});
				});

				// 从 Map 转换为数组并返回
				return Array.from(groupedData, ([treeTypeName, group]) => ({
					TreeTypeName: treeTypeName,
					...group,
				}));
			},

			FormateBackFun(str, data) {
				if (str == 'rank') { // 员工排行
					let IconUrl = '';
					switch (data) {
						case 0:
							IconUrl = '/static/image/Icon/first.png';
							break;
						case 1:
							IconUrl = '/static/image/Icon/second.png';
							break;
						case 2:
							IconUrl = '/static/image/Icon/third.png';
							break;
						default:
							break;
					}

					return IconUrl;
				}
			},
			ChangeDate() { // 修改日期
				var that = this;
				this.PickerIndex = 1;
				that.getTopNumsData();
			},
			dateFormat(val, Type = 'Y-MM-dd') { // 格式化时间
				var that = this;
				if (!that.$utils.isEmpty(val)) {
					return that.Request.dateFormat(new Date(val), Type);
				} else {
					return that.Request.dateFormat(new Date(), Type);
				}
			},
			getTopNumsData() { // 获取顶部看板数据
				let that = this;
				try {
					let obj = {
						Approve: that.ChoiceData,
						FCJType: that.FCJType,
						FSDate: that.dateFormat(that.singleTimes[0]),
						FEDate: that.dateFormat(that.singleTimes[1]),
					};

					// console.log(obj);
					that.Request.request('XGD_BulletinBoard', obj, function(ret) {
						if (ret.status == 200) {
							// 顶部看板数据
							that.ModleList[0]['ShowText'] = ret.data.ds[0]['FSumQty'];
							that.ModleList[1]['ShowText'] = ret.data.ds[0]['FDailyQtt'];
							that.ModleList[2]['ShowText'] = (ret.data.ds[0]['OKRate']).toFixed(2) + '%';
							that.ModleList[3]['ShowText'] = ret.data.ds[0]['BGDNum'];

							// console.log(ret.data.ds)

							that.RollList = ret.data.ds1.map(item => {
								return {
									...item,
									title: item['EmplName'] + ' ' + item['ProcedureName'],
									time: that.dateFormat(item.BillDate, 'Y-MM-dd hh:mm'),
									Date: that.dateFormat(item.BillDate, 'Y-MM-dd hh:mm'),
								}
							})

							// 完成数量统计
							that.FisishData = ret.data.ds2.slice(0, 5);

							// 工序执行进度
							that.getServerData(ret.data.ds3);

							// 员工报工排行
							// 按FSumQty排序
							ret.data.ds4.sort((a, b) => parseFloat(b.FSumQty) - parseFloat(a.FSumQty));
							that.rankingData = ret.data.ds4.slice(0, 5);


							// setTimeout(() => {
							// 	that.$refs.paging.endRefresh()
							// }, 100)

						} else {

							// that.$refs.paging.endRefresh()
						}
						// console.log(JSON.stringify(ret.data.ds3))
					})

				} catch (e) {
					// that.$refs.paging.endRefresh()
					//TODO handle the exception
				}
			},

			getServerData(data) {
				let categories = [],
					FPlanQty = [],
					FDailyQtt = [],
					FNgQty = []
				data.forEach(item => {
					categories.push(item.ProcedureName)
					FPlanQty.push(item.FPlanQty)
					FDailyQtt.push(item.FDailyQtt)
					FNgQty.push(item.FNgQty)
				})

				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: categories,
					series: [{
							name: "计划数",
							// index: 1,
							type: "FPlanQty",
							// style: "line",
							type: "column",
							color: "#5470c6",
							data: FPlanQty
						},
						{
							name: "良品数",
							// index: 1,
							type: "column",
							color: "#2fc25b",
							data: FDailyQtt
						},
						{
							name: "不良品数",
							// index: 1,
							type: "column",
							color: "#ff6d33",
							data: FNgQty
						},
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			sectionChange(index) { // 切换分段器
				this.current = index;
			},
			openBroadcastPopup() { // 打开实时看板弹层
				this.BroadcastPopup = true;
			},
			closeBroadcastPopup() { // 关闭实时看板弹层
				this.BroadcastPopup = false;
			},
			dragBtnClick() { // 点击悬浮按钮
				// console.log(1)
				setTimeout(() => {
					this.OpenTipsPopup = true;
				}, 50)
			},
			closeTipsPopup() { // 关闭看板注释弹层
				this.OpenTipsPopup = false;
			},
			// 跳转当前菜单页面
			checkOutMenu(menu) {
				let that = this;

				let filterData = that.$store.state.APPModules.filter(item => item.ModuleName == menu.APPTypeName);
				if (filterData.length) {
					that.initModule(filterData[0], menu)
				}

			},

			// 切换分类
			changeTreeType(treeType, index) {
				let that = this;
				that.selectedTreeType = treeType;
				that.treeTypeIdx = index;
			},

			toggleShortcut(page) {
				// console.log(page);
				// 非默认快捷方式支持编辑
				if (!page.IsShortcut) {
					if (page.IsChecked) {
						page.IsChecked = false;
					} else {
						page.IsChecked = true;
					}
					this.$forceUpdate();
				}
			},

			// 快捷菜单初始化
			initShortcut() {
				let that = this;
				let modules = that.$store.state.APPModules;
				that.module = modules.find(item => item.ModuleID == that.currModuleID);
				let str = uni.getStorageSync('shortcuts' + that.currBoardID); // 获取缓存快捷菜单
				if (str) { // 存在快捷菜单缓存,则对比后更新
					let shortcuts = JSON.parse(str);
					let Menus1 = that.module.shortcuts.filter(item => item.IsShortcut && item.KanBanID == that
						.currBoardID); // 默认菜单整体替换
					let Menus2 = that.compareMenus(shortcuts, that.module.authPages); // 非默认菜单
					that.shortcuts = [...Menus1, ...Menus2];
					that.initTree(Menus2);
				} else { // 不存在则取后台默认快捷
					that.shortcuts = that.module.shortcuts.filter(item => item.IsShortcut && item.KanBanID == that
						.currBoardID);
				}
				that.persistShortcut(that.shortcuts);
			},

			// 保存快捷发起
			saveShortcut() {
				let that = this;
				let addPages = []; // 勾选页面
				let delPages = []; // 反选页面
				that.module.treeTypes.forEach(tree => {
					tree.pages.forEach(page => {
						let flag = that.shortcuts.some(item => item.APPFunID == page.APPFunID);
						if (!page.IsShortcut && !flag && page.IsChecked) { // 新增
							addPages.push(page);
						}
						if (!page.IsShortcut && flag && !page.IsChecked) { // 删除
							delPages.push(page);
						}
					})
				})
				// 最大可设置快捷方式数量
				let totalnums = that.shortcuts.length + addPages.length - delPages.length;
				if (totalnums > that.maxMenus) {
					uni.showToast({
						title: '超最大可设置数!',
					})
					that.initTree(that.shortcuts.filter(item => !item.IsShortcut));
					return;
				}
				delPages.forEach(item => {
					let idx = that.shortcuts.findIndex(sc => sc.APPFunID == item.APPFunID);
					that.shortcuts.splice(idx, 1);
				})
				that.shortcuts = [...that.shortcuts, ...addPages];
				that.persistShortcut(that.shortcuts);
				that.showMenuCfg = false;
				uni.showToast({
					title: '设置成功!',
					icon: 'success'
				})
			},

			// 比较缓存非默认快捷菜单并返回
			compareMenus(oldMenu, newMenu) {
				let menus = oldMenu.filter(item => !item.IsShortcut);
				menus.forEach((item, index) => {
					// 缓存非默认快捷菜单不存在于授权页面中则移除
					let flag = newMenu.some(m => m.APPFunID == item.APPFunID);
					if (!flag) {
						menus.splice(index, 1);
					}
				});
				return menus;
			},

			// 初始化选中状态(非默认快捷菜单部分)
			initTree(menus) {
				let that = this;
				// 更新非默认已有菜单为选中
				menus.forEach(menu => {
					let treeType = that.module.treeTypes.find(tree => tree.treeType == menu.TreeType);
					let page = treeType.pages.find(page => page.APPFunID == menu.APPFunID);
					page.IsChecked = true;
				})
				// 更新选中未保存为未选中
				that.module.treeTypes.forEach(tree => {
					tree.pages.forEach(item => {
						let flag = menus.some(menu => menu.APPFunID == item.APPFunID);
						if (!flag && !item.IsShortcut) {
							item.IsChecked = false;
						}
					})
				})
			},

			// 持久化快捷菜单
			persistShortcut(shortcuts) {
				let that = this;
				that.$store.commit('ChangeAndSetStateData', {
					Name1: 'shortcuts' + that.currBoardID,
					data: shortcuts,
					StorageName: 'shortcuts' + that.currBoardID,
					StorageData: JSON.stringify(shortcuts)
				});
			},

			// 显示弹窗
			showPopUp(type) {
				let that = this;
				if (type == 'menuConfig') {
					that.treeTypeIdx = 0;
					that.selectedTreeType = that.module.treeTypes[0];
					that.showMenuCfg = true;
				}
			},

			// 关闭弹窗
			closePopUp(type) {
				let that = this;
				if (type == 'menuConfig') {
					that.showMenuCfg = false;
					that.initTree(that.shortcuts.filter(item => !item.IsShortcut));
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$h-padding: 5px;
	$v-padding: 10px;
	$radius: 5px;

	.condition-right /deep/ .uni-calendar__content {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.Common_Popup {
		background-color: #f2f2f2;

		.Common_Popup_MainBox {
			flex: 1;
			overflow: auto;
			// padding-bottom: 20px;
			padding-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);

			.Common_Card {
				margin-bottom: 34rpx;
				letter-spacing: 1px;

				.Common_Card_title {
					font-size: 28rpx;
					color: #333;
				}

				.Common_Card_Text {
					color: #999;
					font-size: 28rpx;
					margin-top: 10rpx;
					line-height: 42rpx;
				}
			}

			// 实时播报
			.MyStep {

				.m-field {
					margin-top: 3rpx;
				}
			}

		}
	}

	.content1 {
		background-color: rgba(222, 222, 222, .1);
		position: relative;

		.condition {
			display: flex;
			align-items: center;
			padding-top: 28rpx;

			&-left {
				width: 150rpx;
				margin-right: 20rpx;
			}

			&-right {
				flex: 1;
			}
		}

		.MainBox {
			padding: 10px 5px;
			// flex: 1;
			// overflow: auto;
			// width: 100%;

			.ItemCard {
				width: 22%;
				border-radius: 12px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 40rpx 0;
			}


			.CommonCardBox {
				padding: 20rpx 0;
				min-height: 200px;
				background-color: #fff;
				border-radius: 12px;
				margin-top: 24rpx;


				.CommonCard_TitleLeftIcon {
					padding: 8rpx;
					border-radius: 18rpx;
				}

				.FinishIconBac {
					background-color: rgba(132, 222, 13, .1);
				}

				.GXIconBac {
					background-color: rgba(165, 111, 233, .1);
				}

				.YGBGPHIconBack {
					background-color: rgba(244, 234, 42, .1);
				}

				.BLPFBIconBack {
					background-color: rgba(255, 111, 111, .1);
				}


				.CommonCard_RightBox {

					.Text {
						color: #51d0d0;
						margin-right: 6rpx;
						font-size: 24rpx;
					}

					.u-icon {
						font-weight: 600;
					}
				}

				.CommonCard_Main {
					padding-bottom: 20rpx;

					.LineBox {
						padding: 20rpx 30rpx;

						.TextBox {
							justify-content: space-between;
							font-size: 28rpx;
							margin-bottom: 24rpx;
						}

						.Line_Left {
							color: #757575;
							white-space: nowrap;
							/* 防止文本换行 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}

						.Line_Right {
							min-width: 64rpx;
							text-align: right;
						}
					}
				}
			}
		}
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: $v-padding $h-padding;
		background-color: #ffffff;
		// margin-bottom: $v-padding;
		border-radius: $radius;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 $h-padding $v-padding $h-padding;

			&-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 150rpx;
				font-size: 14px;
				font-weight: 500;
			}

			&-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 100rpx;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
		}
	}

	//设置轮播的指示点大小
	.swiper {
		height: 160px;

		/deep/ .uni-swiper-dots {
			// 指示点整个区域
			bottom: 10rpx;
		}

		/deep/ .uni-swiper-dot {
			// 指示点元素默认样式
			width: 10rpx;
			height: 6rpx;
			border-radius: 4rpx;
		}

		/deep/ .uni-swiper-dot-active {
			// 指示点元素激活（当前选中）状态样式
			width: 20rpx;
			background: #51d0d0;
		}
	}

	// 快捷菜单宫格
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 5px 0 10px 0;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	// 快捷菜单弹窗
	.shortcut {
		display: flex;
		flex-direction: column;
		height: 80vh;

		&-content {
			display: flex;
			flex: 1;
			padding: $v-padding $h-padding;

			.left_wrap {
				display: flex;
				flex-direction: column;
				width: 180rpx;

				.leftItem {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 60rpx;
					border-radius: $radius;
				}

				.leftItem.on {
					background-color: $main-background-color;
					color: #ffffff;
				}
			}

			.right_wrap {
				display: flex;
				flex-direction: column;
				flex: 1;
				height: calc(80vh - 44px);
				overflow-y: auto;

				.rightItem {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 28rpx;
					margin-left: $h-padding;
				}

				.rightItem.on {
					background-color: $main-background-color;
					color: #ffffff;
				}
			}
		}

		&-bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			width: 100%;
			height: 100rpx;
			padding: $v-padding $h-padding;
			left: 0;
			bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
		}
	}
</style>